<template>
  <!-- 最终受益人 -->
  <el-table :data="detail" border style="width: 100%">
    <el-table-column label="编号" type="index" width="60" />
    <el-table-column prop="name" label="最终受益人名称" show-overflow-tooltip />
    <el-table-column prop="pathRatio" label="最终受益股份" show-overflow-tooltip />
    <el-table-column prop="pathData" label="股权链" min-width="350" show-overflow-tooltip>
      <template #default="scope">
        <div v-for="(item, index) in scope.row.pathData" :key="'path' + index">
          <p style="font-size: 14px; line-height: 34px; font-weight: bold">
            股权路径{{ index + 1 }}（占比约{{ item.pathpercent }}%）
          </p>

          <span
            v-for="(path, i) in item.pathList"
            :key="i"
            style="font-size: 12px; line-height: 24px"
          >
            <span>{{ path.investComp }}</span>
            <span> -> {{ path.percent }} </span>
            <span v-if="i < item.pathList.length - 1">-></span>
          </span>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup lang="ts">
const props = defineProps({
  detail: Array
})
</script>

<style lang="scss" scoped>
.title {
  margin: 30px 0 20px;
  font-size: 16px;
  color: #333333;
  font-weight: bold;

  .total {
    color: #1677ff;
    margin-left: 5px;
  }
}
</style>
